<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="yes" name="apple-touch-fullscreen" />
	<meta content="telephone=no,email=no" name="format-detection" />
	<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes" />
	<link rel="stylesheet" type="text/css" href="./js/swiper/swiper-bundle.min.css" />
	<link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="./css/common.min.css" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<title>Fubit</title>
</head>

<body>
	<div id="preloader">
		<div class="preloader">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px"
				height="30px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
				<g id="fbit-loading" fill="#cca252">
					<path opacity="0.2"
						d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
                    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
                    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z">
					</path>
					<path d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
                    C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">
						<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
							to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
					</path>
				</g>

			</svg>
		</div>

	</div>
	<header class="nav-header">
		<div class="container-01">
			<a href="search.html">

				<div class="search-con flex align-center gutter-mt gutter-mb">

					<div class="search-text">
						<input placeholder="搜索" disabled="disabled" />
					</div>
					<div class="btnSearch">
						<i class="iconfont icon-sousuo"></i>
					</div>

				</div>

			</a>


			<div class="my-nav">
				<div class="flex justify-center swiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><a href="index.html">首頁</a></div>
						<div class="swiper-slide"><a href="selling.html">熱賣商品榜</a></div>
						<div class="swiper-slide"><a href="lib.html">選品庫</a></div>
						<div class="swiper-slide"><a href="abroad.html">跨境專區</a></div>
					</div>
				</div>
			</div>

		</div>
	</header>
	<section class="card gutter-pt">

		<div class="banner">
			<div class="scroll-box container-01">
				<div class="swiper banner-swiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="https://www.baidu.com">
								<img src="./images/mock/slide1.jpg" alt="">
							</a>
						</div>
						<div class="swiper-slide">
							<a href="https://www.baidu.com">
								<img src="./images/mock/slide2.jpg" alt="">
							</a>
						</div>
						<div class="swiper-slide">
							<a href="https://www.baidu.com">
								<img src="./images/mock/slide3.jpg" alt="">
							</a>
						</div>
					</div>
					<div class="swiper-pagination"></div>
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>

				</div>
				<!-- 如果需要导航按钮 -->


			</div>
		</div>
	</section>
	<section class="card gutter-pb gutter-pt">
		<div class="container-01">
			<div class="sort-con flex align-center js-sort">
				<a id="recommend" class="active" href="javascript:;">推荐</a>
				<a id="profit" class="flex align-center" data-ord="1"  href="javascript:;"><span>佣金</span><span class="sort-updown"><i class="iconfont icon-xiangshang"></i><i class="iconfont icon-xiangxia"></i></span></i></a>
				<a id="amount" class="flex align-center"  data-ord="1"  href="javascript:;"><span>價格</span><span class="sort-updown"><i class="iconfont icon-xiangshang"></i><i class="iconfont icon-xiangxia"></i></span></a>
				<a id="sold" class="flex align-center" href="javascript:;"><span>銷量<i class="iconfont icon-shuzhixiajiang"></i></span></a>
			</div>
		</div>
        
	</section>
	<section class="card">
		<div class="container-01">
			<div class="live-list js-list">
			

			</div>
			<div class="more"><a class="">点击加载更多</a></div>

		</div>
	</section>



	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script src="./js/swiper/swiper-bundle.min.js"></script>
	<script src="./js/app.js"></script>
	<script>
		$(function () {
		   var listData=[{
			   id:"0",
			   name:"北极狼 BeiJiLang六角天幕户外遮阳防晒沙滩帐篷防雨遮阳棚露营凉棚天幕帐篷",//商品名称
			   imgSrc:"./images/mock/pic-2.jpg",//商品图片
			   amount:"80.89",//商品金额
			   sold:"100",//已售数量
			   shopName:"北极狼",//商店名称
			   shopLink:"https://www.baidu.com",//商店跳转地址
			   shopScore:"3.8",//商店评分5分制
               profit:"12",//赚的钱
		   },{
			   id:"1",
			   name:"北极狼 BeiJiLang六角天幕户外遮阳防晒沙滩帐篷防雨遮阳棚露营凉棚天幕帐篷",//商品名称
			   imgSrc:"./images/mock/pic-1.jpg",//商品图片
			   amount:"12800",//商品金额
			   sold:"13400",//已售数量
			   shopName:"北极狼",//商店名称
			   shopLink:"",//商店跳转地址
			   shopScore:"4.5",//商店评分5分制
               profit:"109800",//赚的钱
		   },{
			   id:"2",
			   name:"北极狼 BeiJiLang六角天幕户外遮阳防晒沙滩帐篷防雨遮阳棚露营凉棚天幕帐篷",//商品名称
			   imgSrc:"./images/mock/pic-6.jpg",//商品图片
			   amount:"12800",//商品金额
			   sold:"1000",//已售数量
			   shopName:"北极狼",//商店名称
			   shopLink:"",//商店跳转地址
			   shopScore:"3.1",//商店评分5分制
               profit:"109",//赚的钱
		   },{
			   id:"3",
			   name:"雅弥优格",//商品名称
			   imgSrc:"./images/mock/pic-7.jpg",//商品图片
			   amount:"12800",//商品金额
			   sold:"1002000",//已售数量
			   shopName:"北极狼",//商店名称
			   shopLink:"",//商店跳转地址
			   shopScore:"0",//商店评分5分制
               profit:"0.8",//赚的钱
		   },{
			   id:"4",
			   name:"哈尔滨风味红肠",//商品名称
			   imgSrc:"./images/mock/pic-8.jpg",//商品图片
			   amount:"12800",//商品金额
			   sold:"188",//已售数量
			   shopName:"北极狼",//商店名称
			   shopLink:"",//商店跳转地址
			   shopScore:"1.7",//商店评分5分制
               profit:"1098",//赚的钱
		   },{
			   id:"5",
			   name:"腊味烧鸡山东特产小吃员工福利",//商品名称
			   imgSrc:"./images/mock/pic-9.jpg",//商品图片
			   amount:"12800",//商品金额
			   sold:"198100",//已售数量
			   shopName:"北极狼",//商店名称
			   shopLink:"",//商店跳转地址
			   shopScore:"5",//商店评分5分制
               profit:"10",//赚的钱
		   }]
           //初始化渲染列表内容
		   myList.render({
				node: '.js-list',
				data: listData
			});

			
			
		})
	</script>

</body>

</html>